import React, { Component } from 'react';
import {
	StyleSheet, View, Alert, Image, ScrollView
} from "react-native";
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
import { Common } from '../../../../component/common/Common.js';
import { StateLightBox } from '../../../../component/Store';
import { PageStatusIndex } from '../../../../component/page-status/PageStatusIndex';
import OrderApproveService from '../_common/service';
import { PaymentBaseSection } from './_component/PaymentBaseSection';
import { PaymentItemSection } from './_component/PaymentItemSection';
import { StateSection } from './_component/StateSection';
import { ApproveButton } from './_component/approveButton';
import { ApproveRefuseModal } from './modals/refuse';
import ToastUtil from '../../../../utils/toast';

const scale = GLOBAL.SCALE;

export class PaymentApprovePage extends Component {
	static navigationOptions = ({ navigation, navigationOptions }) => {
		const { params } = navigation.state;
		return {
			headerTitle: '订单付款审批详情',
			headerTintColor: style.color.white,
			headerLeft: <Common type="headLeft" onPress={() => { navigation.navigate('ApproveListPage', { choice: params.choice || {} }) }} color='#fff' />,
			headerRight: (<Image style={style.head.headRightEmpty} source={require('../../../../imgs/goBackEmpty.png')} />),
			headerStyle: style.head.headerStyle,
			headerTitleStyle: {
				flex: 1,
				textAlign: 'center'
			}
		}
	};

	requesting;
	constructor(props) {
		super(props);
		this.paymentApplyId = props.navigation.state.params.paramsData.paymentApplyId;
		this.taskId = props.navigation.state.params.paramsData.taskId;
		this.formKey = props.navigation.state.params.paramsData.dictKey;
		this.status = props.navigation.state.params.status;
		this.companyName = props.navigation.state.params.paramsData.companyName;
		this.auditResultName = props.navigation.state.params.paramsData.auditResultName;
		this.paymentApplySource = props.navigation.state.params.paramsData.paymentApplySource;
		this.approveType = props.navigation.state.params.paramsData.approveType;
		this.choice = props.navigation.state.params.choice || {};

		this.state = {
			data: {},
			refuseModalVisible: false,
			loaded: false,
			lightBoxVisible: false
		}
	}

	componentWillMount () {
		this._getDetailData()
	}

	//初始化详情数据
	async _getDetailData () {
		this.setState({
			loaded: true
		});
		let responseData = await OrderApproveService.getApproveDetail({ approveType: this.approveType }, { paymentApplyId: this.paymentApplyId });
		this.setState({
			loaded: false
		});
		if (responseData) {
			this.setState({
				data: responseData
			})
		}
	}

	approveAgree () {
		this.isAgreed = '1';
		this.remark = '';
		this.setState({
			refuseModalVisible: true
		})
	}

	approveRefuse () {
		this.isAgreed = '0';
		this.remark = '';
		this.setState({
			refuseModalVisible: true
		})
	}

	async _fetchApproval () {
		if (this.requesting) return;
		this.setState({ refuseModalVisible: false, loaded: true });
		this.requesting = true;
		const responseData = await OrderApproveService.goApprove({ approveType: this.approveType }, {
			businessKey: this.paymentApplyId,
			formKey: this.formKey,
			taskId: this.taskId,
			auditResult: this.isAgreed,
			remark: this.remark, //this.state.remark, // 填写
			corpId: this.choice.corpId
		});

		this.setState({
			loaded: false
		});

		if (responseData) {
			ToastUtil.showSuccess((this.isAgreed == '0') ? '驳回成功' : '审批成功').then(() => { this._goBack(); })
		} else {
			this.requesting = false;
		}
	}

	// 返回上一个页面
	_goBack = () => {
		this.requesting = false;
		this.props.navigation.navigate('ApproveListPage', { choice: this.choice });
	}

	render () {
		let { data } = this.state;
		let { companyName, paymentApplyId, paymentApplySource, processInstanceId } = data;
		/**
		 * paymentApplySource
		 * DD 采购订单  RK 采购入库  FP 采购发票  FFP 费用发票  TK 客户退款
		*/
		return (
			<View style={styles.container}>
				<View style={styles.emptyBg}>
				</View>
				<ScrollView style={{ paddingTop: 10 * scale }}>
					<PaymentBaseSection data={data} navigation={this.props.navigation} choice={this.choice} />
					{paymentApplySource !== 'TK' ? <PaymentItemSection data={data} /> : null}
				</ScrollView>
				<StateSection corpId={this.choice.corpId || null} data={{ orderId: paymentApplyId, processInstanceId, companyName: companyName ? companyName : this.companyName, auditResultName: this.auditResultName }} approveType={this.approveType} />
				{
					//待审批状态下才展示审批按钮
					this.status && this.status === 'LOT' ? (
						<View style={{ backgroundColor: '#fff' }}>
							<ApproveButton agreePress={() => { this.approveAgree(); }} refusePress={() => { this.approveRefuse(); }} />
						</View>
					) : null
				}
				<ApproveRefuseModal
					titleText={'审批意见'}
					placeholderText={this.isAgreed == '1' ? '请输入同意原因' : null}
					propsDefaultValue={this.isAgreed == '1' ? '审批同意' : '审批驳回'}
					visible={this.state.refuseModalVisible}
					btnPress={(remark) => {
						this.remark = remark;
						this._fetchApproval();
					}} bgPress={() => {
						this.setState({
							refuseModalVisible: false,
						});
					}} />
				{
					this.state.loaded ?
						<View style={{ position: 'absolute', height: '100%', width: '100%', top: 0 }}>
							<PageStatusIndex status='loading' />
						</View>
						: null
				}
			</View >
		)
	}
}
const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: style.color.white,
	},
	emptyBg: {
		height: 39 * scale,
		backgroundColor: style.color.themeColor,
		marginBottom: 13 * scale,
	},
	paiziBox: {
		width: 351 * scale,  // 726
		height: 60 * scale,
		position: 'absolute',
		left: 12 * scale,
		top: 8 * scale
	},
	paizi: {
		flexDirection: 'row',
		height: 48 * scale,
		justifyContent: 'space-between',
		alignItems: 'center',
		paddingLeft: 15 * scale,
		paddingRight: 15 * scale,
		paddingTop: 10 * scale
	},
	paiziBg: {
		width: 351 * scale,
		position: 'absolute',
	},
	topLeft: {
		fontSize: 14 * scale,
		color: style.color.themeColor,
	},
	topRight: {
		fontSize: 13 * scale,
		color: '#222',
	}
})